<template>
	<view class="container">
		<TopBtn :title="'选择人员'"></TopBtn>
		<searchBar :placeholder="'根据姓名找医生'" @chenge="chenge"></searchBar>
		<view class="listBox">
			<view class="flex-center mb_30" v-for="n in list" :key="n.id" @click="checkedBox(n.id,n.consultationStatus)">
				<view class="change">
					<text v-if="n.consultationStatus==0"></text>
					<image v-else-if="act.includes(n.id)" src="@/static/cooperate/xz.png" mode=""></image>
					<image v-else src="@/static/cooperate/wzx.png" mode=""></image>
				</view>
				<view class="list">
					<view class="title flex-center">
						<image src="@/static/my/tx.png" mode=""></image>
						<view class="">
							<view class="name">
								{{n.name}} <text>{{n.titleName}}</text> <text>{{n.departName}}</text>
							</view>
							<view class="typeBox" v-if="n.levelName">
								<text v-if="n.levelName">{{n.levelName}}</text> {{n.hospitalName}}
							</view>
						</view>
					</view>
					<view class="text rowShow_2">
						<text>擅长：</text> {{n.proficient}}
					</view>
				</view>
			</view>
		</view>
		<view class="btnBox">
			<view class="">
				已选中 <text> {{act.length}}</text> 人
			</view>
			<view class="btn" @click="Submit()">
				确认
			</view>
		</view>
		<view class="kong">

		</view>
	</view>
</template>

<script>
	import {
		getDoctorInfoPage,
		createTeamManage,
		getMyTeamManageList
	} from '@/api/user'
	export default {
		data() {
			return {
				act: [],
				list: [],
				request: {
					pageNo: 1,
					pageSize: 10,
					name: "",
					role: 1
				},
				maxNum: "",
				type: '',
				userId: uni.getStorageSync('userId')
			};
		},
		onLoad(e) {
			this.type = e.type
			this.getDoctorInfoPage()
			if (this.type == 'team') {
				this.getMyTeamManageList()
			}
		},
		onReachBottom() {
			if (this.maxNum <= this.request.pageNo) return
			this.request.pageNo = this.request.pageNo + 1
			this.getDoctorInfoPage()
		},
		methods: {
			chenge(e) {
				console.log(e)
				this.request.name = e
				this.list = []
				this.request.pageNo = 1
				this.getDoctorInfoPage()
			},
			Submit() {
				if (this.type == 'team') {
					this.act.push(this.userId)
					createTeamManage(this.act).then(res => {
						uni.$emit('show', true)
						uni.navigateBack({
							delta: 1, //返回层数，2则上上页
						})
					})
				}
				if (this.type == 'group') {
					uni.$emit('ids', this.act.join(","))
					uni.navigateBack({
						delta: 1, //返回层数，2则上上页
					})
				}
			},
			getMyTeamManageList() {
				getMyTeamManageList().then(res => {
					this.act = res.data
				})
			},
			getDoctorInfoPage() {
				getDoctorInfoPage(this.request).then(res => {
					this.list.push(...res.data.list)
					let num = res.data.total / this.request.pageSize
					if (num.toString().includes('.')) {
						num = Math.ceil(num)
					}
					this.maxNum = num
				})
			},
			checkedBox(val,status) {
				if (status == 0) {
					uni.showToast({
						title: '会诊未开通',
						duration: 2000,
						icon: 'none',
						mask: true
					})
					return
				}
				// this.actid = val
				if (this.act.includes(val)) {
					this.act.splice(this.act.indexOf(val), 1)
					return
				}
				// this.act = []
				this.act.push(val)
				// this.show = false
			},
			goinfo(id) {
				if (id) {
					uni.navigateTo({
						url: `/pages/prescription/details/details?id=${id}`,
					})
				}
			},
		}
	}
</script>

<style lang="less" scoped>
	.btnBox {
		width: 749rpx;
		height: 130rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		padding: 0 50rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;

		text {
			margin: 0 5rpx;
		}

		.btn {
			width: 334rpx;
			height: 100rpx;
			background: #3B6CFE;
			border-radius: 50rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 100rpx;
			text-align: center;
		}
	}

	.listBox {
		margin-top: 43rpx;
		padding: 0 30rpx;

		.change {
			margin-right: 12rpx;

			text {
				display: inline-block;
				width: 30rpx;
				height: 30rpx;
				background: #999;
				border-radius: 50%;
				box-sizing: border-box;
				border: 1px solid #EEEEEE;
			}

			image {
				width: 30rpx;
				height: 30rpx;
			}
		}

		.list {
			width: 690rpx;
			min-height: 182rpx;
			background: #FFFFFF;
			border-radius: 30rpx;
			padding: 20rpx;
			box-sizing: border-box;

			.title {
				.name {
					font-weight: bold;
					font-size: 32rpx;
					color: #333333;

					text {
						font-weight: 500;
						font-size: 24rpx;
						color: #666666;
						margin-left: 19rpx;
					}
				}

				image {
					width: 90rpx;
					height: 90rpx;
					margin-right: 30rpx;
				}
			}

			.text {
				font-weight: 500;
				font-size: 26rpx;
				color: #333333;
				margin-top: 30rpx;

				text {
					color: #999;
				}
			}

			.typeBox {
				margin-top: 15rpx;
				font-weight: 500;
				font-size: 26rpx;
				color: #666666;

				text {
					display: inline-block;
					width: 63rpx;
					height: 33rpx;
					background: #DEF7ED;
					border-radius: 10rpx;
					font-weight: 500;
					font-size: 22rpx;
					color: #23CC88;
					text-align: center;
					line-height: 33rpx;
					margin-right: 10rpx;
				}

			}


		}
	}
</style>